<template>
	<div>
		<el-form ref="queryFrom" size="small" :inline="true" :model="queryForm" class="demo-form-inline">
			<el-form-item prop="name" label="商品名称">
				<el-input v-model="queryForm.goods.gname" placeholder="请输入商品名称" style="width: 140px"></el-input>
			</el-form-item>
			<el-form-item prop="brand" label="品牌" :label-width="'60px'">
				<el-select v-model="queryForm.goods.gbrand" placeholder="请选择品牌" style="width: 150px">
					<el-option v-for="item in brandList" :key="item.id + ''" :label="item.brandName"
						:value="item.brandName">
					</el-option>
				</el-select>
			</el-form-item>
			<el-form-item prop="status" label="审核状态">
				<el-select v-model="queryForm.applyStatus" placeholder="请选择审核状态" style="width: 150px">
					<el-option v-for="item in statusList" :key="item.dicDataId" :label="item.dicDataLabel"
						:value="item.dicDataLabel">
					</el-option>
				</el-select>
			</el-form-item>
			<el-form-item>
				<el-button type="primary" size="mini" @click="doQuery()" icon="el-icon-search">搜索</el-button>
				<el-button type="primary" size="mini" plain icon="el-icon-refresh" @click="resetQueryForm()">重置
				</el-button>
			</el-form-item>
		</el-form>
		<el-button type="primary" icon="el-icon-plus" size="mini" plain @click="showAdd">新增商品转赠品
		</el-button>
		<!-- 展示数据 -->
		<el-table ref="multipleTable" :data="tableData" tooltip-effect="dark" style="width: 100%">
			<el-table-column type="selection" width="55"> </el-table-column>
			<el-table-column prop="goods.gname" label="商品名称" width="320">
			</el-table-column>
			<el-table-column prop="goods.gbrand" label="商品品牌">
			</el-table-column>
			<el-table-column prop="goods.marketPrice" label="商品价格"></el-table-column>
			<el-table-column prop="goods.stock" label="商品库存数">
			</el-table-column>
			<el-table-column prop="count" label="商转赠数">
			</el-table-column>
			<el-table-column prop="applyStatus" label="审核状态">
			</el-table-column>

			<el-table-column label="操作" align="center" min-width="200">
				<template slot-scope="scope">
					<el-button size="mini" plain small @click="showDetail(scope.row)">查看</el-button>
					<el-button size="mini" plain mini v-show="scope.row.applyStatus=='草稿'"
						@click="showUpdate(scope.row)">修改</el-button>
					<el-button type="danger" size="mini" plain mini v-show="scope.row.applyStatus=='草稿'"
						@click="deleteApply(scope.row)">删除</el-button>
					<el-button size="mini" plain mini @click="followHistory(scope.row)" style="width: 100px">审核跟踪
					</el-button>
				</template>
			</el-table-column>
		</el-table>
		<!-- 分页 -->
		<el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange"
			:current-page="queryForm.pageNum" :page-sizes="[5, 10, 15]" :page-size="queryForm.pageSize"
			layout="->, total, sizes, prev, pager, next, jumper" :total="totalNum">
		</el-pagination>

		<!-- 转商品弹框 -->
		<el-dialog :title="dialogTitle" :visible.sync="goods2GiftsDialogFormVisible">
			<el-form :model="form" size="small">
				<el-form-item :label-width="formLabelWidth">
					<el-button type="primary" size="mini" @click="showSelectGiftDialog" plain
						v-show="dialogTitle!='查看详情'">选择商品</el-button>
				</el-form-item>
				<el-form-item label="商品名称" :label-width="formLabelWidth">
					<el-input v-model="form.goods.gname" autocomplete="off" style="width: 200px" disabled>
					</el-input>
				</el-form-item>
				<el-form-item label="商品品牌" :label-width="formLabelWidth">
					<el-input v-model="form.goods.gbrand" autocomplete="off" style="width: 200px" disabled>
					</el-input>
				</el-form-item>
				<el-form-item label="商品类型" :label-width="formLabelWidth">
					<treeselect v-model="form.goods.gtype" placeholder="商品类型" style="width:190px;" clearable
						:options="goodsTypeTree" :normalizer="normalizer" disabled />
				</el-form-item>
				<el-form-item label="商品型号" :label-width="formLabelWidth">
					<el-input v-model="form.goods.gmodel" autocomplete="off" style="width: 200px" disabled>
					</el-input>
				</el-form-item>
				<el-form-item label="商品颜色" :label-width="formLabelWidth">
					<el-select v-model="form.goods.gcolor" placeholder="请选择" disabled>
						<el-option v-for="dict in colorList" :key="dict.dicDataVal" :label="dict.dicDataLabel"
							:value="dict.dicDataVal" />
					</el-select>
				</el-form-item>
				<el-form-item label="商品市场价" :label-width="formLabelWidth">
					<el-input v-model="form.goods.marketPrice" autocomplete="off" style="width: 200px" disabled>
					</el-input>
				</el-form-item>
				<el-form-item label="采购成本" :label-width="formLabelWidth">
					<el-input v-model="form.goods.purchasePrice" autocomplete="off" style="width: 200px" disabled>
					</el-input>
				</el-form-item>
				<el-form-item label="商品库存量" :label-width="formLabelWidth">
					<el-input v-model="form.goods.stock" autocomplete="off" style="width: 200px" disabled></el-input>
				</el-form-item>
				<el-form-item label="转赠品数量" :label-width="formLabelWidth">
					<el-input v-model="form.count" autocomplete="off" style="width: 200px"></el-input>
				</el-form-item>
			</el-form>
			<div slot="footer" class="dialog-footer">
				<el-button @click="save()" v-show="dialogTitle!='查看详情'">草稿</el-button>
				<el-button @click="submit()" v-show="dialogTitle!='查看详情'">提交</el-button>
				<el-button @click="closeForm()">关闭</el-button>
			</div>
		</el-dialog>

		<el-dialog :visible.sync="selectGoodsVisible" width="980px">
			<el-form :model="queryGoodsForm" size="small" ref="queryGoodsForm" :inline="true" class="demo-form-inline">
				<el-form-item label="名称:" prop="gcode">
					<el-input v-model="queryGoodsForm.gname" style="width:100px"></el-input>
				</el-form-item>
				<el-form-item label="型号:" prop="gmodel">
					<el-input v-model="queryGoodsForm.gmodel" style="width:100px"></el-input>
				</el-form-item>
				<el-form-item label="颜色" prop="gcolor">
					<el-select v-model="queryGoodsForm.gcolor" placeholder="请选择" clearable style="width:100px">
						<el-option v-for="dict in colorList" :key="dict.dicDataVal" :label="dict.dicDataLabel"
							:value="dict.dicDataVal" />
					</el-select>
				</el-form-item>
				<el-form-item>
					<el-button type="primary" @click="listGift" size="mini" icon="el-icon-search" plain>搜索
					</el-button>
					<el-button icon="el-icon-refresh" @click="resetQueryGoodsForm()" size="mini" plain>重置
					</el-button>
				</el-form-item>
				<div>
					<el-table ref="goodsTableData" :data="goodsTableData" tooltip-effect="dark">
						<el-table-column prop="gcode" label="编码"></el-table-column>
						<el-table-column prop="gname" label="名称"></el-table-column>
						<el-table-column prop="gbrand" label="品牌"></el-table-column>
						<el-table-column prop="gmodel" label="型号"></el-table-column>
						<el-table-column prop="gcolor" label="颜色">
							<template slot-scope="scope">
								<div v-for="dict in colorList" :key="dict.dicDataVal" :label="dict.dicDataLabel"
									:value="dict.dicDataVal">
									<div v-if="scope.row.gcolor == dict.dicDataVal">
										{{dict.dicDataLabel}}
										</v-if>
									</div>
								</div>
							</template>
						</el-table-column>
						<el-table-column prop="operate" label="操作">
							<template slot-scope="scope">
								<el-button type="success" icon="el-icon-circle-check"
									@click="setGoods(scope.$index, scope.row)" size="mini" plain>选择
								</el-button>
							</template>
						</el-table-column>
					</el-table>
					<el-pagination @size-change="handleSizeChange2" @current-change="handleCurrentChange2"
						:current-page="queryGoodsForm.pageNum" :page-sizes="[10,20,30,40]"
						:page-size="queryGoodsForm.pageSize" layout="->, total, sizes, prev, pager, next, jumper"
						:total="queryGoodsForm.totalNum">
					</el-pagination>
				</div>
			</el-form>
		</el-dialog>

		<el-dialog title="审核记录" :visible.sync="processTaskVisble" width="70%">
			<el-table ref="processTaskTableData" :data="processTaskTableData" tooltip-effect="dark">
				<el-table-column prop="taskName" label="任务名" align="center"></el-table-column>
				<el-table-column prop="taskUser" label="审批人员" align="center"></el-table-column>
				<el-table-column prop="taskBegin" label="产生时间" align="center"></el-table-column>
				<el-table-column prop="claimTime" label="签收时间" align="center"></el-table-column>
				<el-table-column prop="taskEnd" label="审核时间" align="center"></el-table-column>
				<el-table-column prop="approveResult" label="结果" align="center"></el-table-column>
				<el-table-column prop="approveContent" label="意见" align="center"></el-table-column>
			</el-table>
		</el-dialog>
	</div>

</template>

<script>
	import {
		getDistinctBrand
	} from '@/api/gg/brand.js';
	import {
		getGoodsTypeTree
	} from '@/api/gg/goodsType.js';
	import Treeselect from '@riophae/vue-treeselect'
	import '@riophae/vue-treeselect/dist/vue-treeselect.css'
	export default {
		components: {
			Treeselect
		},
		data() {
			return {
				totalNum: 0,
				queryForm: {
					goods: {
						gname: "",
						gbrand: "",
					},
					applyStatus: "",
					pageNum: 1,
					pageSize: 10
				},
				queryGoodsForm: {
					gname: null,
					gmodel: null,
					gcolor: null,
					pageNum: 1,
					pageSize: 10,
					totalNum: null
				},
				tableData: [],
				brandList: [],
				goodsTypeTree: [],
				colorList: [],
				statusList: [],
				form: {
					id: null,
					goodId: null,
					count: null,
					applyUser: null,
					applyStatus: null,
					goods: {
						gname: null,
						gbrand: null,
						gcolor: null,
						gtype: null,
						purchasePrice: null,
						marketPrice: null
					}
				},
				formLabelWidth: "120px",
				goods2GiftsDialogFormVisible: false,
				dialogTitle: null,
				selectGoodsVisible: false,
				processTaskVisble: false,
				processTaskTableData: [],
				goodsTableData: [],
				normalizer(node) {
					return {
						id: node.id,
						label: node.typeName,
						children: node.children,
					}
				},
			};
		},
		methods: {
			closeForm() {
				this.resetForm();
				this.goods2GiftsDialogFormVisible = false;
			},
			handleSizeChange(val) {
				this.queryForm.pageSize = val;
			},
			handleCurrentChange(val) {
				this.queryForm.pageNum = val;
			},
			handleSizeChange2(val) {
				this.queryGoodsForm.pageSize = val;
			},
			handleCurrentChange2(val) {
				this.queryGoodsForm.pageNum = val;
			},
			doQuery() {
				axios.get('/goods2Gifts?' + this.qs_stringify(this.queryForm)).then(resp => {
					this.tableData = resp.data.list;
					this.queryForm.pageNum = resp.data.pageNum;
					this.queryForm.pageSize = resp.data.pageSize;
					this.totalNum = resp.data.total;
				})
			},
			showDetail(row) {
				this.form = JSON.parse(JSON.stringify(row));
				this.dialogTitle = "查看详情";
				this.goods2GiftsDialogFormVisible = true;
			},
			showUpdate(row) {
				this.form = JSON.parse(JSON.stringify(row));
				this.dialogTitle = "修改申请单";
				this.goods2GiftsDialogFormVisible = true;
			},
			showAdd() {
				this.resetForm();
				this.dialogTitle = "添加赠转商申请单";
				this.goods2GiftsDialogFormVisible = true;
			},
			resetForm() {
				this.form = {
					id: null,
					goodId: null,
					count: null,
					applyUser: null,
					applyStatus: null,
					goods: {
						gname: null,
						gbrand: null,
						gcolor: null,
						gtype: null,
						purchasePrice: null,
						marketPrice: null
					}
				}
			},
			resetQueryForm() {
				this.queryForm = {
					goods: {
						gname: null,
						gbrand: null,
					},
					applyStatus: null,
					pageNum: 1,
					pageSize: 10
				};
				this.doQuery();
			},
			resetQueryGoodsForm() {
				this.queryGoodsForm = {
					gname: null,
					gmodel: null,
					gcolor: null,
					pageNum: 1,
					pageSize: 10,
					totalNum: null
				};
			},
			save() {
				axios.post("goods2Gifts/cg", this.form).then(resp => {
					if (resp.code == 20000) {
						this.suc("保存草稿成功");
					} else {
						this.error(resp.msg);
					}
					this.goods2GiftsDialogFormVisible = false;
					this.doQuery();
				})
			},
			submit() {
				axios.post("goods2Gifts/tj", this.form).then(resp => {
					if (resp.code == 20000) {
						this.suc("提交审核成功");
					} else {
						this.error(resp.msg);
					}
					this.goods2GiftsDialogFormVisible = false;
					this.doQuery();
				})
			},
			deleteApply(row) {
				axios.delete('goods2Gifts/' + row.id).then(resp => {
					if (resp.code == 20000) {
						this.suc(resp.msg);
					} else {
						this.error(resp.msg);
					}
					this.doQuery();
				})
			},
			setGoods(i, row) {
				this.form.goods = JSON.parse(JSON.stringify(row));
				this.form.goodId = row.id;
				this.selectGoodsVisible = false;
				this.goodsTableData = [];
				this.resetQueryGoodsForm();
			},
			listGift() {
				axios.get('/goods/goods2?' + this.qs_stringify(this.queryGoodsForm)).then(resp => {
					this.goodsTableData = resp.list;
					this.queryGoodsForm.pageNum = resp.pageNum;
					this.queryGoodsForm.pageSize = resp.pageSize;
					this.queryGoodsForm.totalNum = resp.total;
				})
			},
			showSelectGiftDialog() {
				this.selectGoodsVisible = true;
				this.resetQueryGoodsForm();
			},
			followHistory(row) {
				axios.get("/goods2Gifts/audit/" + row.id).then(resp => {
					this.processTaskTableData = resp.data;
					this.processTaskVisble = true;
				})
			}
		},
		created() {
			this.getDictItems("review").then(resp => {
				this.statusList = resp.data;
			});
			this.getDictItems("phone_color").then(resp => {
				this.colorList = resp.data;
			});
			getDistinctBrand().then(resp => {
				this.brandList = resp.data;
			});
			getGoodsTypeTree().then(resp => {
				this.goodsTypeTree = resp.data;
			});
		},
		mounted() {
			this.doQuery();
		},
	};
</script>

<style scoped>
	a {
		color: #409eff;
		font-size: 16px;
	}

	.mytag {
		width: 200px;
		height: 40px;
		font-size: 15px;
	}
</style>
